<template>
    <div v-bind:style="{width: contentWidth}" style="margin: 0 auto">
        <!--轮播图-->
        <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="item in 10" :key="item">
                <h3>{{ item }}</h3>
            </el-carousel-item>
        </el-carousel>
        <!--公告-->
        <el-row>
            <el-col :span="24">
                <elnotice></elnotice>
            </el-col>
        </el-row>
        <!--个人信息 班级 成果 考试-->
        <el-row :gutter="20">
            <el-col :span="8">
                <elinfo></elinfo>
            </el-col>
            <el-col :span="16">
                <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-right: 10px">
                    <el-tab-pane label="我的班级" name="class"></el-tab-pane>
                    <el-tab-pane label="我的考试" name="exam"></el-tab-pane>
                    <el-tab-pane label="我的成果" name="result"></el-tab-pane>
                </el-tabs>
                <keep-alive v-if="$route.meta.keepAlive">
                    <router-view></router-view>
                </keep-alive>
            </el-col>
        </el-row>
        <!--新闻-->
        <el-row>
            <el-col :span="24">
                <elnews></elnews>
            </el-col>
        </el-row>
    </div>

</template>

<script>

    import elnotice from "@/components/student/el-notice"
    import elnews from "@/components/student/el-news"
    import elinfo from "@/components/student/el-info"

    export default {
        components: {elnotice, elnews, elinfo},
        name: "StudentHome",
        data() {
            return {
                // 页面宽度
                contentWidth: "80%",
                activeName: "class"
            }
        },
        methods: {
            handleClick(tab, event) {
                let path = tab.$vnode.componentOptions.propsData.name;
                this.$router.replace({name: path});
            }
        }
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>
